<template>
	<view class="">
		<view class="title">
			{{props.data.title}}
		</view>
		<swiper class="swiper" next-margin="10px" >
			<swiper-item class="swiperItem" v-for="(item,index) of props.data.data" :key="index">
				<view class="SWI" v-for="(it,i) of item" :key="i">

					<view class="img" :style="{backgroundImage:`url(${it.img})`}"></view>
					<view class="content">
						
						<view class="title">
							{{it.title}}
						</view>
						<view class="describ">
							<view class="tag" :style="{backgroundColor: it.tagType=='1'?'rgba(240, 115, 115, 0.5)':'white',border:it.tagType=='1'?'none':'0.5px solid rgba(255, 0, 0, 0.3)' }" >
								{{it.tag}}
							</view>
						{{it.describ}}
						</view>
					</view>
					<view class="button">
						
						<i class="iconfont icon-start"></i>
					</view>
					
				</view>
				
			</swiper-item>
			
		</swiper>

	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from "vue"
	const props=defineProps({
		data:Object
	})
	
</script>

<style lang="scss" scoped>
	.title {
		font-weight: 600;
		font-size: 30rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		color: #28323D;
	}

	.swiper {
		// background-color: blanchedalmond;
		height: 500rpx;

		.swiperItem {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 100%;

			.SWI {

				// background-color: gold;
				height: 150rpx;
				display: flex;

				.img {
					height: 150rpx;
					width: 150rpx;
					min-width: 150rpx;
					border-radius: 10px;
					

				}

				.content {
					height: 100%;
					width: 100rpx;
					min-width: 100rpx;
					width: calc(100vw - 25rpx - 150rpx - 100rpx);
					border-radius: 10px;
					padding-left: 15rpx;
						
					.title{
						width: 100%;
						overflow: hidden;
						/* 溢出部分隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号代替溢出部分 */
						white-space: nowrap;
						
					}
					.describ{
						// display: f;
						font-size: 25rpx;
						overflow: hidden;
						/* 溢出部分隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号代替溢出部分 */
						white-space: nowrap;
						color: #94949C;
						// border-radius: 5rpx;
						.tag{
							font-size: 20rpx;
							padding:  5rpx;
							border-radius: 5rpx;
							display: inline-block;
							background-color: rgba(240, 115, 115, 0.5);
							color: #EF4043;
							// max-width: 200rpx;
							// overflow: hidden;
							/* 溢出部分隐藏 */
							text-overflow: ellipsis;
							/* 使用省略号代替溢出部分 */
							white-space: nowrap;
							// border-radius: 5rpx;
						}
					}
					
				}

				.button {
					height: 100%;
					width: 100rpx;
					min-width: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #696E81;
					// background-color: gray;
					
				}
			}
		}

	}
</style>